<template>
    <div>
        <div class="container" @mouseenter="stopAutoScroll" @mouseleave="resumeAutoScroll">
            <div class="header">
                <span style="flex: 3;">学院</span>
                <span style="flex: 2;">总人数/落实率</span>
                <span style="flex: 2;">本科生/落实率</span>
                <span style="flex: 2;">研究生/落实率</span>
            </div>
            <div class="table-wrapper" ref="tableWrapper">
                <div v-for="(data, index) in loopTableData" :key="index" class="table">
                    <div style="flex: 3;">
                        {{ data.major }}
                    </div>
                    <div style="flex: 2;">
                        <span style="color: rgb(255,252, 26);">{{ data.t_Name }}</span>/
                        <span>{{ data.t_Address }}</span>
                    </div>
                    <div style="flex: 2;">
                        <span style="color: rgb(255,252, 26);">{{ data.colegeName }}</span>/
                        <span>{{ data.c_Address }}</span>
                    </div>
                    <div style="flex: 2;">
                        <span style="color: rgb(255,252, 26);">{{ data.masterAddress }}</span>/
                        <span>{{ data.masterName }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [
                { major: '材料科学与工程学院', masterName: '71.49%', masterAddress: 249, colegeName: 335, c_Address: "38.21%", t_Name: 584, t_Address: "52.40%" },
                { major: '电气工程学院', masterName: '77.11%', masterAddress: 201, colegeName: 420, c_Address: "34.76%", t_Name: 621, t_Address: "48.47%" },
                { major: '国际工学院', masterName: '54.55%', masterAddress: 11, colegeName: 274, c_Address: "44.89%", t_Name: 285, t_Address: "45.26%" },
                { major: '机械与精密仪器工程学院', masterName: '76.45%', masterAddress: 310, colegeName: 596, c_Address: "44.97%", t_Name: 906, t_Address: "55.74%" },
                { major: '计算机科学与工程学院', masterName: '66.88%', masterAddress: 157, colegeName: 390, c_Address: "27.18%", t_Name: 547, t_Address: "38.57%" },
                { major: '经济与管理学院', masterName: '43.88%', masterAddress: 531, colegeName: 389, c_Address: "22.62%", t_Name: 920, t_Address: "34.89%" },
                { major: '理学院', masterName: '53.85%', masterAddress: 117, colegeName: 209, c_Address: "36.84%", t_Name: 326, t_Address: "42.94%" },
                { major: '马克思主义学院', masterName: '12.90%', masterAddress: 93, colegeName: 0, c_Address: "0.00%", t_Name: 93, t_Address: "12.90%" },
                { major: '人文与外国语学院', masterName: '27.69%', masterAddress: 65, colegeName: 139, c_Address: "26.62%", t_Name: 204, t_Address: "26.96%" },
                { major: '水利水电学院', masterName: '48.54%', masterAddress: 410, colegeName: 385, c_Address: "52.47%", t_Name: 795, t_Address: "50.44%" },
                { major: '土木建筑工程学院', masterName: '50.22%', masterAddress: 225, colegeName: 295, c_Address: "45.08%", t_Name: 520, t_Address: "47.31%" },
                { major: '艺术与设计学院', masterName: '47.25%', masterAddress: 91, colegeName: 286, c_Address: "42.66%", t_Name: 377, t_Address: "43.77%" },
                { major: '印刷包装与数字媒体学院', masterName: '62.26%', masterAddress: 159, colegeName: 245, c_Address: "18.37%", t_Name: 404, t_Address: "35.64%" },
                { major: '自动化与信息工程学院', masterName: '64.21%', masterAddress: 366, colegeName: 667, c_Address: "37.48%", t_Name: 1033, t_Address: "46.95%" },
            ],
            scrollTimer: null,
            scrollTimeout: null,
            isPaused: false,  // 控制是否暂停滚动
        };
    },
    computed: {
        loopTableData() {
            return [...this.tableData, ...this.tableData];
        }
    },
    props: {
        maxHeight: {
            type: Number
        }
    },
    mounted() {
        this.$nextTick(() => {
            const tableWrapper = this.$refs.tableWrapper;
            if (tableWrapper) {
                let scrollTop = 0;
                this.scrollTimer = setInterval(() => {
                    if (!this.isPaused) {
                        scrollTop++;
                        tableWrapper.scrollTop = scrollTop;

                        // 滚动到复制数据的开头时重置
                        if (scrollTop >= tableWrapper.scrollHeight / 2) {
                            scrollTop = 0;
                            tableWrapper.scrollTop = scrollTop;
                        }
                    }
                }, 100); // 控制滚动速度
            }
        });
    },
    beforeDestroy() {
        clearInterval(this.scrollTimer);
        clearTimeout(this.scrollTimeout);
    },
    methods: {
        // 停止自动滚动
        stopAutoScroll() {
            this.isPaused = true;
            clearTimeout(this.scrollTimeout);  // 清除已设定的恢复滚动定时器
        },
        // 恢复自动滚动，延迟1秒后启动
        resumeAutoScroll() {
            this.scrollTimeout = setTimeout(() => {
                this.isPaused = false;
            }, 1000); // 延迟1秒恢复滚动
        }
    }
};
</script>

<style scoped>
.container {
    width: 32vw;
    height: 32vh;
    background-color: rgb(11, 31, 66);
    overflow: hidden;
}

.header {
    width: 100%;
    height: 4vh;
    display: flex;
    justify-content: space-around;
    color: #f0f9eb;
}

.table-wrapper {
    height: 22vh;
    overflow-y: auto;
    /* 隐藏滚动条 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.table-wrapper::-webkit-scrollbar {
    display: none;
}

.table {
    display: flex;
    justify-content: space-around;
    color: rgb(255, 255, 255);
    font-size: 1.5vh;
}
</style>